<template>
    <a-render>
        <template #leftheader>
            <h2 class="render-hedaer-title">{{ hasId ? "编辑藏馆" : "新建藏馆" }}</h2>
        </template>
        <template #rightheader>
            <a-space>
                <a-button type="primary" @click="useSave">保存</a-button>
                <a-button>取消</a-button>
            </a-space>
        </template>
        <div class="form-wrap">
            <Form ref="formRef" label-align="left" :style-col="{ style: { width: '210px' } }" :wrapper-col="12" :list="state.controlList" :fields="state.fields">
              <template #literatureType>
                <div class="dis-flex flex-align-center">
                  <i class="iconfont icon-jiahao handle-add" @click="show = true"></i>
                  <ul class="literature-type-item" v-if="literatureTypeList.length">
                    <li v-for="(item, index) in literatureTypeList" :key="item.literature_id">
                      {{ item.literature_name }}
                      <i class="close" @click="useDeleteLiteratureItem(index)"></i>
                    </li>
                  </ul>
                </div>
                <div v-show="show">
                  <a-space>
                    <Select v-model="state.fields.literature_id" :loading="uesSaveLoading" @change="useChangeSelect" :options-async="useGetLiteratureAll" mode="multiple" width="200px" id="literature_id" name="literature_name" />
                    <a-button  @click="show = false">取消</a-button>
                  </a-space>
                </div>
              </template>
            </Form>
        </div>
    </a-render>
</template>
<script setup>
import { reactive, ref } from "vue"

import Form from "@/components/form/index.vue"
import Select from "@/components/control/select/index.vue"


import { useForm } from "./form"

// formRef
const formRef = ref(null)

// show
const show = ref(false)

const { 
  useChangeSelect, 
  literatureTypeList, 
  useGetLiteratureAll, 
  state, 
  useDeleteLiteratureItem, 
  useSave, 
  uesSaveLoading,
  hasId
} = useForm(formRef)






</script>
<style lang="scss" scoped>
.literature-type-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  li {
    display: flex;
    align-items: center;
    background-color: #F1F1F1;
    padding: 0 10px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    border-radius: 2px;
    color: #666666;
    &:hover {
      background-color: #E8E8E8;
    }
    + li {
      margin-left: 10px;
    }
  }
  .close {
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    opacity: .5;
    margin-left: 6px;
    cursor: pointer;
    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 4px;
      border-left: 1px solid #000;
      height: 8px;
    }
    &::after {
      transform: rotate(45deg);
    }
    &::before {
      transform: rotate(-45deg);
    }
  }
}
.handle-add {
  margin-right: 10px;
  font-size: 22px;
  cursor: pointer;
  &:hover {
    color: var(--primary)
  }
}
</style>